<!--
 *@description:
 *@author: Ming
 *@date: 2021-05-01 18:01:06
 *@version: V1.0.5
-->
<template>
    <button class="lm-button" :class="[`icon-${iconPosition}`,size, type, {'round':round, 'circle':circle, 'loading':loading,'wave':wave, 'plain':plain}]" @click="useClick" :disabled="disabled">
        <lm-icon class="icon" v-if="icon && !loading" :name="icon" ></lm-icon>
        <lm-icon class="loading icon" v-if="loading" name="reload"></lm-icon>
        <!-- 如果插槽没内容 不显示 -->
        <div class="lm-button-content" v-if="$slots.default && !circle"> 
            <template v-if="!loading">
                <slot/>
            </template>
            <template v-else>
                {{loadingText}}
            </template>
        </div>
    </button>
</template>

<script>
import Icon from "./icon";
export default {
  name: "LmButton",
  data () {
      return {
        // 波浪效果
        wave:false,
      }
  },
  components: {
    "lm-icon": Icon
  },
  props: {
    icon: {},
    loading: {
      type: Boolean,
      default: false
    },
    iconPosition: {
      type: String,
      default: "left",
      validator(value) {
        return value === "left" || value === "right";
      }
    },
    loadingText:{
      type: String,
      default: '加载中'
    },
    // 圆角
    round:{
        type:Boolean,
        default:false
    },
    // 圆
    circle:{
        type:Boolean,
        default:false
    },
    // 朴素按钮
    plain:{
        type:Boolean,
        default:false
    },
    // 禁用
    disabled:{
        type:Boolean,
        default:false
    },
    type:{
        type:String,
        validator(value) {
            let arr = [
                'dashed',
                'primary',
                'success',
                'info',
                'warning',
                'danger'
            ]
            return arr.includes(value)
        }
    },
    // 尺寸
    size:{
        type:String,
        validator(value) {
            let arr = [
                'medium',
                'small',
                'mini',
            ]
            return arr.includes(value)
        }
    },
    animation:{
        type:Boolean,
        default:true
    }
  },
  methods: {
      useClick(e){
        this.$emit('click',e)
        if(this.animation){
            this.waveAnimation()
        }
      },
      waveAnimation(){
          this.wave = true
          setTimeout(()=>{
              this.wave = false
          },500)
      }
  }
};
</script>

<style scoped lang="scss">
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes borderAnumation {
    0% { opacity: 1; transform: scale(1);}
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes borderCircleAnumation {
    0% { opacity: 1; transform: scale(1);}
  100% { opacity: 0; transform: scale(1.3); }
}
.lm-button{
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 4px;
    position: relative;
    border:1px solid #dcdfe6;
    color: #606266;
    background: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    &:hover{
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
        > .icon {
            fill:#409eff;
        }
    }
    &:active{
        color: #3a8ee6;
        border-color: #3a8ee6;
        outline: none;
        > .icon {
            fill:#3a8ee6;
        }
    }
    &:focus{
        outline: none;
    }
    > .lm-button-content {
        order: 2;
    }
    > .icon {
        order: 1;
        // margin-right: 5px;
        &.loading{
            animation: spin 1s infinite linear;
        }
    }
    > .icon ~ .lm-button-content{
        margin-left: 5px;
    }
    &.icon-right {
        > .lm-button-content {
            order: 1;
        }
        > .icon {
            order: 2;
            margin-right: 0;
            margin-left: 0.1em;
        }
    }

    // 点击波纹效果
    &.wave::after{
        content: '';
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0;
        bottom: 0;
        background: #c6e2ff;
        border-radius: 4px;
        opacity: 0;
        transform: scale(1);
        z-index: -1;
        animation: borderAnumation .5s linear;
    }

    // loading
    &.loading{
        background: #fff;
        border: 1px solid #dcdfe6;
        position: relative;
        pointer-events: none;
        color: #a6a6a6;
        > .icon {
            fill:#606266
        }
        
    }

    // 虚线按钮
    &.dashed{
        border-style: dashed;
        background: #fff;
        
    }
    // 主要按钮
    &.primary{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        &::after{
            background-color: #409eff;
        }
        &:hover{
            background: #66b1ff;
            border-color: #66b1ff;
        }
        &:active{
            background: #3a8ee6;
            border-color: #3a8ee6;
        }
        > .icon {
            fill: #fff
        }
    }
    &.success{
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
        &::after{
            background-color: #67c23a;
        }
        &:hover{
            background: #85ce61;
            border-color: #85ce61;
        }
        &:active{
            background: #5daf34;
            border-color: #5daf34;
        }
    }
    &.info{
        color: #fff;
        background-color: #909399;
        border-color: #909399;
        &::after{
            background-color: #909399;
        }
        &:hover{
            background: #a6a9ad;
            border-color: #a6a9ad;
        }
        &:active{
            background: #82848a;
            border-color: #82848a;
        }
    }
    &.warning{
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
        &::after{
            background-color: #e6a23c;
        }
        &:hover{
            background: #ebb563;
            border-color: #ebb563;
        }
        &:active{
            background: #cf9236;
            border-color: #cf9236;
        }
    }
    &.danger{
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
        &::after{
            background-color: #f56c6c;
        }
        &:hover{
            background: #f78989;
            border-color: #f78989;
        }
        &:active{
            background: #dd6161;
            border-color: #dd6161;
        }
    }

    // 圆角
    &.round{
        border-radius: 20px;
        padding: 12px 23px;
        &::after{
            border-radius: 20px;
        }
    }

    // 圆
    &.circle{
        border-radius: 50%;
        padding: 12px;
        &::after{
            border-radius: 50%;
            animation: borderCircleAnumation .5s linear;
        }
        &.primary{
            > .icon {
                fill:#fff
            }
        }
        &.success{
            > .icon {
                fill:#fff
            }
        }
        &.info{
            > .icon {
                fill:#fff
            }
        }
        &.warning{
            > .icon {
                fill:#fff
            }
        }
        &.danger{
            > .icon {
                fill:#fff
            }
        }
    }

    // 朴素按钮
    &.plain{
        &:hover{
            background: #fff;
            border-color: #409eff;
            color: #409eff;
        }
        &:active{
            border-color: #3a8ee6;
            color: #3a8ee6;
        }
        &.primary{
            color: #409eff;
            background: #ecf5ff;
            border-color: #b3d8ff;
            > .icon {
                fill:#409eff
            }
            &:hover{
                background: #409eff;
                border-color: #409eff;
                color: #fff;
            }
            &:active{
                background: #3a8ee6;
                border-color: #3a8ee6;
                color: #fff;
            }
        }
        &.success{
            color: #67c23a;
            background: #f0f9eb;
            border-color: #c2e7b0;
            > .icon {
                fill:#67c23a
            }
            &:hover{
                background: #67c23a;
                border-color: #67c23a;
                color: #fff;
            }
            &:active{
                background: #5daf34;
                border-color: #5daf34;
                color: #fff;
            }
        }
        &.info{
            color: #909399;
            background: #f4f4f5;
            border-color: #d3d4d6;
            > .icon {
                fill:#909399
            }
            &:hover{
                background: #909399;
                border-color: #909399;
                color: #fff;
            }
            &:active{
                background: #82848a;
                border-color: #82848a;
                color: #fff;
            }
        }
        &.warning{
            color: #e6a23c;
            background: #fdf6ec;
            border-color: #f5dab1;
            > .icon {
                fill:#e6a23c
            }
            &:hover{
                background: #e6a23c;
                border-color: #e6a23c;
                color: #fff;
            }
            &:active{
                background: #cf9236;
                border-color: #cf9236;
                color: #fff;
            }
        }
        &.danger{
            color: #f56c6c;
            background: #fef0f0;
            border-color: #fbc4c4;
            > .icon {
                fill:#f56c6c
            }
            &:hover{
                background: #f56c6c;
                border-color: #f56c6c;
                color: #fff;
            }
            &:active{
                background: #dd6161;
                border-color: #dd6161;
                color: #fff;
            }
        }
    }

    // 禁用
    &[disabled]{
        cursor: not-allowed;
        color: #c0c4cc;
        background-image: none;
        background-color: #fff;
        border-color: #ebeef5;
        &.primary{
            color: #fff;
            background-color: #a0cfff;
            border-color: #a0cfff;
        }
        &.success{
            color: #fff;
            background-color: #b3e19d;
            border-color: #b3e19d;
        }
        &.info{
            color: #fff;
            background-color: #c8c9cc;
            border-color: #c8c9cc;
        }
        &.warning{
            color: #fff;
            background-color: #f3d19e;
            border-color: #f3d19e;
        }
        &.danger{
            color: #fff;
            background-color: #fab6b6;
            border-color: #fab6b6;
        }
        &.plain{
            &:hover{
                cursor: not-allowed;
                color: #c0c4cc;
                background-image: none;
                background-color: #fff;
                border-color: #ebeef5;
            }
            &.primary{
                color: #8cc5ff;
                background-color: #ecf5ff;
                border-color: #d9ecff;    
            }
            &.success{
                color: #a4da89;
                background-color: #f0f9eb;
                border-color: #e1f3d8;
            }
            &.info{
                color: #bcbec2;
                background-color: #f4f4f5;
                border-color: #e9e9eb;
            }
            &.warning{
                color: #f0c78a;
                background-color: #fdf6ec;
                border-color: #faecd8;
            }
            &.danger{
                color: #f9a7a7;
                background-color: #fef0f0;
                border-color: #fde2e2;
            }
        }
    }


    // size
    &.medium{
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
        &.round{
            border-radius: 20px;
            &::after{
                border-radius: 20px;
            }
        }
    }
    &.small{
        padding: 9px 15px;
        font-size: 12px;
        border-radius: 3px;
        &.round{
            border-radius: 20px;
            &::after{
                border-radius: 20px;
            }
        }
    }
    &.mini{
        padding: 7px 15px;
        font-size: 12px;
        border-radius: 3px;
        &.round{
            border-radius: 20px;
            &::after{
                border-radius: 20px;
            }
        }
    }
}
</style>
